<!DOCTYPE html>
<html>
<head>
    <title>Paint</title>
    <link href="example.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id='controls'>
    Stroke: <select id='strokeStyleSelect'>
    <option value='red'>red</option>
    <option value='green'>green</option>
    <option value='blue'>blue</option>
    <option value='orange'>orange</option>
    <option value='cornflowerblue' selected>cornflowerblue</option>
    <option value='goldenrod'>goldenrod</option>
    <option value='white'>white</option>
    <option value='purple'>purple</option>
</select>

    Fill: <select id='fillStyleSelect'>
    <option value='red'>red</option>
    <option value='rgba(255,0,0,0.5)'>semi-transparent red</option>
    <option value='green'>green</option>
    <option value='rgba(0,255,0,0.5)'>semi-transparent green</option>
    <option value='blue'>blue</option>
    <option value='rgba(0,0,255,0.5)'>semi-transparent blue</option>
    <option value='orange'>orange</option>
    <option value='rgba(255,165,0,0.5)'>semi-transparent orange</option>
    <option value='cornflowerblue'>cornflowerblue</option>
    <option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option>
    <option value='goldenrod'>goldenrod</option>
    <option value='rgba(218,165,32,0.5)' selected>semi-transparent goldenrod</option>
    <option value='white'>white</option>
    <option value='rgba(255,255,255,0.5)'>semi-transparent white</option>
    <option value='purple'>purple</option>
    <option value='rgba(255,0,255,0.5)'>semi-transparent purple</option>
</select>

    Line width: <select id='lineWidthSelect'>
    <option value='1.0'>1.0</option>
    <option value='2.0'>2.0</option>
    <option value='3.0'>3.0</option>
    <option value='4.0'>4.0</option>
    <option value='5.0'>5.0</option>
    <option value='6.0'>6.0</option>
</select>

    <input id='eraseAllButton' type='button' value='Erase all'/>
    <input id='snapshotButton' type='button' value='Take snapshot'/>
    <span id='snapshotInstructions'>Drag the image to your desktop (or Right-click to save to disk)</span>
</div>

<img id='snapshotImageElement' alt=''/> <!-- What's up with the need for alt='', Opera?!? -->

<canvas id='iconCanvas' width='75' height='670'>
    Canvas not supported
</canvas>

<canvas id='drawingCanvas' width='915' height='670'>
    Canvas not supported
</canvas>

<div id='keyboard'></div>

<div id='curveInstructions' class='floatingControls'>
    <p>
        The yellow circle is a control point for the curve. Drag that
        circle around to change the shape of the curve.
    </p>

    <input id='curveInstructionsOkayButton' type='button' value='Okay'/>
    <input id='curveInstructionsNoMoreButton' type='button' value='Do not show this again'/>

</div>

<script src='keyboard.js'></script>

<script src='example.js'></script>

</body>
</html>
